<template>
  <div>
    <div style="margin-bottom: 20px;">
      <el-button size="small" @click="addTab(editableTabsValue)">add tab</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <tree-vue v-model="tests"></tree-vue>
      </el-col>

      <el-col :span="20" :xs="24">
        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
          <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <div class="jt-invigilator__main">
              <div class="jt-invigilator__main__header" v-if="!layout">
                <div
                  v-for="(i, index) in copyline2"
                  :class="{ 'jt-invigilator__main__header-2': index % 2 != 0 }"
                  :key="index"
                >
                  <a
                    href="javascript:void(0)"
                    @click="updatePopup(item)"
                    v-for="(item, index) in copystudent2Array[index]"
                    :key="index"
                    :class="[
                  item.stuStatusName == 0
                    ? 'color'
                    : item.stuStatusName == 1
                    ? 'color2'
                    : item.stuStatusName == 2 ?
                    'color3' : 'color5'
                ]"
                  >
                    <template v-if="item.stuStatusName != 3">
                      <p class="jt-invigilator__main__header__first">{{ item.id }}</p>
                      <p>{{ item.classxNo }}</p>
                      <p>{{ item.studentName }}</p>
                      <p v-if="item.isCheat">
                        <span>
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wubi" />
                          </svg>
                        </span>
                      </p>
                      <p v-if="item.isSign">
                        <span>
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qiandao" />
                          </svg>
                        </span>
                      </p>
                    </template>
                    <template v-else>
                      <p>暂无数据</p>
                    </template>
                  </a>
                </div>
              </div>
              <div class="jt-invigilator__main__header" v-else>
                <div
                  v-for="(i, index) in copyline"
                  :class="{ 'jt-invigilator__main__header-2': index % 2 != 0 }"
                  :key="index"
                >
                  <a
                    href="javascript:void(0)"
                    @click="updatePopup(item)"
                    v-for="(item, index) in copystudentArray[index]"
                    :key="index"
                    :class="[
                item.stuStatusName == 0
                  ? 'color'
                  : item.stuStatusName == 1
                  ? 'color2'
                  : item.stuStatusName == 2 ?
                  'color3' : 'color5'
              ]"
                  >
                    <template v-if="item.stuStatusName != 3">
                      <p class="jt-invigilator__main__header__first">{{ item.id }}</p>
                      <p>{{ item.classxNo }}</p>
                      <p>{{ item.studentName }}</p>
                      <p v-if="item.isCheat">
                        <span>
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wubi" />
                          </svg>
                        </span>
                      </p>
                      <p v-if="item.isSign">
                        <span>
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qiandao" />
                          </svg>
                        </span>
                      </p>
                    </template>
                    <template v-else>
                      <p>暂无数据</p>
                    </template>
                  </a>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import treeVue from "../../../components/tree/tree.vue";
import { treeDataTranslate } from "@/utils";
export default {
  data() {
    return {
      editableTabsValue: "2",
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 2,
      tests: 1,
      studentArray: [
        {
          no: "2019000010111",
          studentName: "刘雅琪",
          classxNo: "B191010",
          isSign: 1, //是否签到 （0，1）
          isCheat: 0, //是否舞弊 （0，1）
          cheatActive: "带小抄",
          stuStatusName: 0, // 考生状态(0考试中,1缺考,2已提交,3已结束)
          sex: null,
        },
        {
          no: "2019000010111",
          studentName: "刘雅琪",
          classxNo: "B191010",
          isSign: 1, //是否签到 （0，1）
          isCheat: 0, //是否舞弊 （0，1）
          cheatActive: "带小抄",
          stuStatusName: 0, // 考生状态(0考试中,1缺考,2已提交,3已结束)
          sex: null,
        },
        {
          no: "2019000010111",
          studentName: "刘雅琪",
          classxNo: "B191010",
          isSign: 1, //是否签到 （0，1）
          isCheat: 0, //是否舞弊 （0，1）
          cheatActive: "带小抄",
          stuStatusName: 0, // 考生状态(0考试中,1缺考,2已提交,3已结束)
          sex: null,
        },
        {
          no: "2019000010111",
          studentName: "刘雅琪",
          classxNo: "B191010",
          isSign: 1, //是否签到 （0，1）
          isCheat: 0, //是否舞弊 （0，1）
          cheatActive: "带小抄",
          stuStatusName: 0, // 考生状态(0考试中,1缺考,2已提交,3已结束)
          sex: null,
        },
      ],
        copystudentArray: [],
      copyline: 0,
      copystudent2Array: [],
      copyline2: 0,
      layout: false,
    };
  },
  components: {
    treeVue,
  },

  created() {
    this.init();
  },

  methods: {
    addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "New Tab",
        name: newTabName,
        content: "New Tab content",
      });
      this.editableTabsValue = newTabName;
    },

    init() {
      // 在这里写初始化接口
      if (this.studentArray.length != 0 && this.studentArray.length <= 30) {
        var desc = 30 - this.studentArray.length;

        for (let index = 0; index < desc; index++) {
          this.studentArray.push({
            stuStatusName: 3,
          });
        }
      }

      // 7788
      this.nums();

      this.popupStudent = {};
    },

    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>